
.ub-panel {
  background: var(--color-content-bg);
  border-radius: var(--size-radius);
  margin-bottom: var(--size-margin);

  &.border-top {
    border-top: 2px solid var(--color-primary);

    .head {
      border-bottom: 1px solid #EEE;

      .title {
        border-left: none;
        padding-left: 0;
      }
    }
  }

  &.margin-top {
    margin-top: 1rem;
  }

  &.transparent {
    background: transparent;

    .head {
      padding: 0 0 0.25rem 0;
    }

    .body {
      padding: 0.75rem 0 0 0;
    }
  }

  .head {
    padding: 0.75rem;

    .more {
      float: right;
    }

    .title {
      //border-left: 0.2rem solid var(--color-primary);
      display: inline-block;
      line-height: 1rem;
      font-size: var(--font-size-medium);
      //padding: 0 0 0 0.5rem;
      //&:before {
      //  content: '';
      //  display: block;
      //  float: left;
      //  width: 1rem;
      //  height: 0.25rem;
      //  border-radius: 0.2rem;
      //  background-image: -webkit-gradient(linear, left top, right top, from(var(--color-primary)), color-stop(var(--color-primary-light)), color-stop(#8068ff), to(var(--color-primary)));
      //  background-image: -o-linear-gradient(left, var(--color-primary), var(--color-primary-light), var(--color-primary-light), var(--color-primary));
      //  background-image: linear-gradient(to right, var(--color-primary), var(--color-primary-light), var(--color-primary-light), var(--color-primary));
      //  background-size: 300% 100%;
      //  -webkit-transition: all .4s ease-in-out;
      //  -o-transition: all .4s ease-in-out;
      //  transition: all .4s ease-in-out;
      //  margin: 0.375rem 0.3rem 0 0;
      //}

      .ub-breadcrumb {
        height: 1rem;

        a {
          line-height: 1rem;
        }
      }
    }
  }

  .body {
    margin-top: -0.75rem;
    padding: 0.75rem;
  }
}
